﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SubtractJS Samples</title>
    <link rel="stylesheet" href="css/subtractjs.css" />
    <link rel="stylesheet" href="css/colors.css" />
    <script type="text/javascript" src="Scripts/jQuery-2.0.3.min.js"></script>
    <script type="text/javascript" src="Scripts/Subtract.min.js"></script>
    <script type="text/javascript" src="Scripts/SubtractJSDocumentation.min.js"></script>
    <style>
        li > a {
            display: block;
            font-size: 1.2em;
        }
        li {
            font-size: .8em;
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="sj-fill-top header screenSection fancyblue">
        <div>
            <img class="subtractLogo" src="Images/subtract-logo.png" />
            SubtractJS
        </div>
    </div>
    <div class="sj-fill-top menubar">&nbsp;</div>
    <div class="sj-fill articleBody main">
        <h2>SubtractJS Samples</h2>
        These samples pages demonstrate using SubtractJS in a few common scenarios.  The samples have the styles embedded in them
        and depend on jQuery and SubtractJS only.  I'm not claiming they are pretty design, but they demonstrate the concepts.  Be
        sure to right-click on the link and "save target" or use "view source" to see how the samples work.<br />
        <br />
        <ul>
            <li>
                <a href="Samples/HeaderMenuFooterSample.html">Fixed-Width Header, Footer, Menu Bar Sample</a>
                A fixed-width header, menu bar, and footer with a content area.
            </li>
            <li>
                <a href="Samples/LeftRightSample.html">Fixed-Width Left and Right Panes Sample</a>
                A fixed-width left and right pane with a content area between them.
            </li>
            <li>
                <a href="Samples/AlternatePrefixSample.html">Alternate Prefix Sample</a>
                Header, Footer, Menu Bar Sample but with the "sj" prefix renamed to "fun".
            </li>
            <li>
                <a href="Samples/MarginBoxModelSample.html">Margin Box Model Sample</a>
                Add the "sj-margin-box-model" class to tell SubtractJS to treat margin, padding, and border as internal to the height or width measurement.
                Works great with percentage-based heights and widths.
            </li>
            <li>
                <a href="Samples/SimpleShowHideSample.html">Using jQuery to Show and Hide SubtractJS Elements Sample</a>
                Show, hide, or toggle elements in jQuery and then update SubtractJS.
            </li>
            <li>
                <a href="Samples/ComplexSample.html">Complex Sample</a>
                This sample demonstrate a complex layout, hiding and showing with animation,
                and altering a layout with jQuery.
            </li>
        </ul>
    </div>
</body>
</html>
